<script setup lang="ts" name="GoodsSku">
import bwPowerSet from '@/utils/power-set';
import {GoodsInfo, specsitem, valueitem } from '@/views/types/data';
const props = defineProps<{
  goods:GoodsInfo,
  skuId:string
}>()
const emit = defineEmits<{
  (e: 'changeSku', skuId: string): void
}>()
const SEPARATOR = '☆'
const changeSelected = (sub:valueitem,item:specsitem) =>{
  // 排他思想，干掉其他
          if(sub.disabled) return
  // 排他思想，干掉其他
     item.values.filter(v => v.name !== sub.name).forEach(i => i.selected = false)
      // 点击高亮
    sub.selected = !sub.selected
    updateDisabledStatus()
      const result = getSelectedSpec()
       if (result.every(item => item)) {
    // 如何获取 skuId ?
    const key = result.join(SEPARATOR)
    const val = pathMap[key]
    // console.log(val[0])
    emit('changeSku', val[0])
  }
}

const getPathMap = () => {
  const pathMap: any = {}
  const skus = props.goods.skus.filter((item) => item.inventory > 0)
  skus.forEach(item=>{
    const xrr = item.specs.map(sub => sub.valueName)
    const pronst = bwPowerSet(xrr)
    pronst.forEach(sub =>{
      const key = sub.join(SEPARATOR)
      // console.log(key);
      // 判断pathMap里面有没有ley
      if(key in pathMap){
        pathMap[key].push[item.id]
      }else{
        pathMap[key] = [item.id]
      }
    })
    })
    return pathMap
}

const updateDisabledStatus = ()=>{
  props.goods.specs.forEach((item,index)=>{
    item.values.forEach((sub: { name: string; disabled: boolean; })=>{
      const selectedArr = getSelectedSpec()
      // console.log(selectedArr)
      // TODO: 待会儿处理具体禁用的逻辑
      selectedArr[index] = sub.name
      // console.log(selectedArr, sub.name, index)
      // console.log(selectedArr.filter(v => v).join(SEPARATOR))
      const key = selectedArr.filter(v => v).join(SEPARATOR)
      // sub.disabled = !(sub.name in pathMap)
      sub.disabled = !(key in pathMap)
    })
  })
}

// getPathMap()
// console.log(getPathMap());
const getSelectedSpec = ()=>{
  const arr:string[] = []
  props.goods.specs.forEach(item =>{
    const fend = item.values.find((sub: { selected: any; }) => sub.selected)
     arr.push(fend ?.name || '')
  })
  return arr
}

function initSpecSelected() {
  if (!props.skuId) return
  // 通过 skuId 去找到当前 sku 勾选的规格
  const result = props.goods.skus.find(item => item.id === props.skuId)
  if (!result) return
  // console.log('通过 ID 找到的 sku:', result.specs)
  const selectArr = result.specs.map(item => item.valueName)
  // console.log(selectArr)
  // 遍历所有的规格, 处理选中状态
  props.goods.specs.forEach(item => {
    item.values.forEach((sub: { selected: boolean; name: string; }) => {
      sub.selected = selectArr.includes(sub.name)
      // sub.selected
      // sub.name = 
      // if (selectArr.includes(sub.name)) {
      //   sub.selected = true
      // }
    })
  })
}
const pathMap = getPathMap()
updateDisabledStatus()
initSpecSelected()
// getSelectedSpec()
</script>
<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.name">
      <dt>{{item.name}}</dt>
      <dd>
        <template  v-for="sub in item.values" :key="sub.name">
          <img
          v-if="sub.picture"
          :class="{selected: sub.selected,disabled:sub.disabled}"
          :src="sub.picture"
          :alt="sub.picture"
          :title="sub.name"
          @click="changeSelected(sub,item)"
        />
        <span @click="changeSelected(sub,item)" v-else :class="{selected: sub.selected,disabled:sub.disabled}">{{sub.name}}</span>
        </template>
      </dd>
    </dl>

  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
